<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>

		<!-- 	生命周期:
		1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
		2.是什么:Vue在关健时刻帮我们调用的一些特殊名称的函数。
		3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
		4.生命周期函数中的this指向是vm 或组件实例对象。 -->

		<!-- 常用的生命周期钩子:
			1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
			2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作
		关于销毁Vue实例
			1.销毁后借助Vue开发者工具看不到任何信息。
			2.销毁后自定义事件会失效,但原生DOM事件依然有效。
			3.一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。 -->
		<div id="app">
			<h2 :style="{opacity}">小光同志</h2>
			<button @click="set(bol)">{{hint}}</button>
			<button @click="stop">销毁vue</button>
		</div>
		<script src="../vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						opacity: 1,
						hint: "停止变换",
						bol: true
					}
				},
				methods: {
					set(bol) {
						if (bol) {
							var a = "-"
							this.timer = setInterval(() => {
								if (this.opacity <= 0) {
									a = "+"
								} else if (this.opacity == 1) {
									a = "-"
								}
								if (a == "+") {
									this.opacity += 0.005
								} else {
									this.opacity -= 0.005
								}
								this.hint = "停止变换"
								this.bol = false
								console.log(1)
							}, 1000 / 120)
						} else {
							clearInterval(this.timer)
							this.bol = true
							this.hint = "开始变换"
						}

					},
					stop() {
						this.$destroy()
					}
				},
				//Vue完成模板的解析并把真实的DOM元素放入页面后（挂载完毕）调用mounted
				mounted() {
					this.set(true)
				},
				beforeDestroy() {
					console.log("vue即将销毁")
					clearInterval(this.timer)
				}
			});

			// var a = "-"
			// //通过外部的定时器实现（不推荐)
			// setInterval(() => {
			// 	if (app.opacity <= 0) {
			// 		a = "+"
			// 	} else if (app.opacity == 1) {
			// 		a = "-"
			// 	}
			// 	if(a=="+"){
			// 		 app.opacity += 0.01
			// 	}else{
			// 		app.opacity -= 0.01
			// 	}
			// }, 10)

			//49
		</script>
	</body>
</html>
